import React, { Component } from 'react';
import ResultPage from '@/components/ResultPage';
import qrcode from '../../assets/qqgroup.png';
import './style.scss';

class Finish extends Component {
  state = {
    icon: 'cross-circle',
    iconColor: '#f13642',
    title: '页面错误',
    message: '请检查您的操作是否正确',
    isDone: false,
  };
  componentDidMount() {
    const { query } = this.props.history.location;
    if (query) {
      this.setState({ isDone: true });
      switch (query.key) {
        case 1:
          this.setState({
            icon: 'check-circle',
            iconColor: '#1aad16',
            title: '报名成功',
            message: '请扫描下方二维码添加QQ群',
          });
          break;
        default:
          return;
      }
    }
  }

  render() {
    const { icon, iconColor, title, message } = this.state;
    return (
      <div>
        <ResultPage icon={icon} iconColor={iconColor} title={title} message={message} />
        {this.state.isDone && (
          <div className="page__result">
            <img src={qrcode} alt="二维码" className="qrcode" />
            <p>请留意笔试短信通知</p>
          </div>
        )}
      </div>
    );
  }
}

export default Finish;
